<template>
  <a-tabs default-active-key="1">
    <a-tab-pane key="1">
      <span slot="tab">
        <a-icon type="info-circle"/>
        资源举报
      </span>

      <div id="components-form-demo-advanced-search" style="padding: 10px 0">
        <!--    搜索区-->
        <a-form class="ant-advanced-search-form" :label-col="{xs: { span: 24 },sm: { span: 5 },}"
                :form="reportSearchForm" @submit="handleSearch">
          <a-row :gutter="48" style="margin-bottom: 20px">
            <a-col :span="8">
                关键字:  <a-input v-model="params.keyword" style="width: 200px" placeholder="请输入关键字查询"/>
            </a-col>

            <a-col :span="8">
                处理状态:
                <a-select v-model="params.reportStatus" placeholder="请选择" style="width: 150px" :default-value="0">
                  <a-select-option :value="undefined">全部</a-select-option>
                  <a-select-option :value="0">待处理</a-select-option>
                  <a-select-option :value="1">已处理</a-select-option>
                  <a-select-option :value="2">已驳回</a-select-option>
                </a-select>
            </a-col>
          </a-row>

          <a-col offset="16" :span="8" style="margin-bottom: 20px">
            <span class="table-page-search-submitButtons" style="float: right">
              <a-button type="primary" html-type="submit">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
            </span>
          </a-col>
        </a-form>
        <!--    数据区-->
        <div class="search-result-list">
<!--                模态框-->
          <a-modal v-model="visible" title="处理举报" ok-text="确认" cancel-text="取消" @ok="submitHandler">
<!--        处理举报-->
            <a-form>
              <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="处理方式"
              >
                <a-select placeholder="请选择处理方式" v-model="handlerCode" style="width: 100%">
                  <a-select-option :value="1">删贴</a-select-option>
                  <a-select-option :value="2">删贴并警告用户</a-select-option>
                  <a-select-option :value="3">删帖并封禁用户账号</a-select-option>
                  <a-select-option :value="4">举报无效并驳回</a-select-option>
                </a-select>
              </a-form-item>

                <a-form-item
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
                    label="描述"
                >
                  <a-textarea :rows="4" style="resize: none" v-model="reportBeizhu" placeholder="请输入结果描述"></a-textarea>
                </a-form-item>
            </a-form>
          </a-modal>

          <a-table :columns="columns"
                   :data-source="reportPage.data"
                   bordered
                   :pagination="false"
                   :loading="isloading"
                   rowKey="id">

            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>

            <span slot="action" slot-scope="text, record">
              <a-space>
            <a-button type="primary" :disabled="record.reportStatus !== 0"
                      @click="reportHandler('handler',record)" size="small" title="处理">处理</a-button>

            <a-button type="primary"
                      @click="reportHandler('detail',record)" size="small" title="详情">详情</a-button>
          </a-space>
            </span>

            <template slot="footer">
              <a-pagination
                  style="text-align: end"
                  v-model="reportPage.pageNum"
                  :page-size-options="['2', '4', '5']"
                  :total="reportPage.total"
                  show-size-changer
                  :page-size="reportPage.pageSize"
                  @showSizeChange="onPageSizeSizeChangeHandler"
                  @change="onPageChangeHandler"
              >
                <template slot="buildOptionText" slot-scope="props">
                  <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                  <span v-if="props.value === '50'">全部</span>
                </template>
              </a-pagination>
            </template>
          </a-table>
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2">
      <span slot="tab">
        <a-icon type="chrome"/>
        反馈处理
      </span>
      <div style="padding: 10px 0">
        <!--    搜索区-->
        <a-form class="ant-advanced-search-form" :label-col="{xs: { span: 24 },sm: { span: 5 },}"
                :form="feedbackSearchForm" @submit="feedbackHandleSearch">
          <a-row :gutter="48" style="margin-bottom: 20px">
            <a-col :span="8">
              关键字:  <a-input v-model="feedbackParams.keyword" style="width: 200px" placeholder="请输入关键字查询"/>
            </a-col>

            <a-col :span="8">
              反馈类型:
              <a-select v-model="feedbackParams.feedbackType" placeholder="请选择" style="width: 150px">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="系统建议">系统建议</a-select-option>
                <a-select-option value="技术交流">技术交流</a-select-option>
                <a-select-option value="BUG反馈">BUG反馈</a-select-option>
              </a-select>
            </a-col>

            <a-col :span="8">
              处理状态:
              <a-select v-model="feedbackParams.feedbackStatus" placeholder="请选择" style="width: 150px" :default-value="undefined">
                <a-select-option :value="undefined">全部</a-select-option>
                <a-select-option :value="0">待处理</a-select-option>
                <a-select-option :value="1">已处理</a-select-option>
              </a-select>
            </a-col>
          </a-row>

          <a-col offset="16" :span="8" style="margin-bottom: 20px">
            <span class="table-page-search-submitButtons" style="float: right">
              <a-button type="primary" html-type="submit">查询</a-button>
              <a-button style="margin-left: 8px" @click="feedbackHandleReset">重置</a-button>
            </span>
          </a-col>
        </a-form>
        <!--    数据区-->
        <div class="search-result-list">
          <!--                模态框-->
          <a-modal v-model="feedbackHandlerVisible" title="处理反馈" ok-text="确认" cancel-text="取消" @ok="feedBacksubmitHandler">
            <!--        处理反馈-->
            <a-form>
              <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="处理方式"
              >
                <a-radio-group v-model="feedbackHandlerParam.feedBackHandlerCode">
                  <a-radio :value="1">
                    简单处理
                  </a-radio>
                  <a-radio :value="2">
                    处理并反馈他
                  </a-radio>
                </a-radio-group>
              </a-form-item>

              <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="反馈回复"
              >
                <a-textarea :rows="4" style="resize: none" v-model="feedbackHandlerParam.feedBackHandlerResult" placeholder="请输入反馈回复"></a-textarea>
              </a-form-item>
            </a-form>
          </a-modal>

          <a-drawer width="500" placement="right" :closable="false" :visible="feedbackDetailVisible" @close="onClose">
            <p :style="pStyle">
              反馈人信息描述
            </p>
            <a-row>
              <a-col :span="12" v-if="feedbackDetail.feedbackUser">
                <a-space>
                  <a-avatar class="cursor" @click="$router.push({name:'userinfo',params:{userId:$encry(feedbackDetail.feedbackUser.userId)}})" :src="feedbackDetail.feedbackUser.avatar" :title="feedbackDetail.feedbackUser.userName"/>
                  <span class="cursor" @click="$router.push({name:'userinfo',params:{userId:$encry(feedbackDetail.feedbackUser.userId)}})">{{feedbackDetail.feedbackUser.userName}}</span>
                  <a-tag  class="cursor" :color="feedbackDetail.feedbackUser.type === 1 ? 'blue' : feedbackDetail.feedbackUser.type === 2 ? 'green' : ''">
                    {{feedbackDetail.feedbackUser.type === 1 ? '超级管理员' : feedbackDetail.feedbackUser.type === 2 ? '管理员' : '用户'}}
                  </a-tag>
                </a-space>
              </a-col>
            </a-row>
            <a-divider />

            <p :style="pStyle">
              反馈内容描述
            </p>
            <a-row>
              <a-col :span="12">
                {{feedbackDetail.feedbackContent}}
              </a-col>
            </a-row>
            <a-divider />

            <p :style="pStyle">
              反馈结果描述
            </p>
            <a-row>
              <a-col :span="12" v-if="feedbackDetail.feedbackResult">
                {{feedbackDetail.feedbackResult}}
              </a-col>
              <a-col v-else>待处理</a-col>
            </a-row>

            <a-divider />
            <p :style="pStyle">
              处理人信息描述
            </p>
            <a-row>
              <a-col :span="12" v-if="feedbackDetail.handlerAdmin">
                <a-space>
                  <a-avatar class="cursor" @click="$router.push({name:'userinfo',params:{userId:$encry(feedbackDetail.handlerAdmin.userId)}})" :src="feedbackDetail.handlerAdmin.avatar" :title="feedbackDetail.handlerAdmin.userName"/>
                  <span class="cursor" @click="$router.push({name:'userinfo',params:{userId:$encry(feedbackDetail.handlerAdmin.userId)}})">{{feedbackDetail.handlerAdmin.userName}}</span>
                  <a-tag  class="cursor" :color="feedbackDetail.feedbackUser.type === 1 ? 'blue' : feedbackDetail.handlerAdmin.type === 2 ? 'green' : ''">
                    {{feedbackDetail.handlerAdmin.type === 1 ? '超级管理员' : feedbackDetail.handlerAdmin.type === 2 ? '管理员' : '用户'}}
                  </a-tag>
                </a-space>
              </a-col>
              <a-col v-else>待处理</a-col>
            </a-row>
          </a-drawer>

          <a-table :columns="feedbackColumns"
                   :data-source="feedbackPage.data || []"
                   bordered
                   :pagination="false"
                   :loading="isloading"
                   rowKey="id">

            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>

            <span slot="action" slot-scope="text, record">
              <a-space>
            <a-button type="primary" :disabled="record.feedbackStatus !== 0"
                      @click="feedBackHandler('handler',record)" size="small" title="处理">处理</a-button>

            <a-button type="primary"
                      @click="feedBackHandler('detail',record)" size="small" title="详情">详情</a-button>
          </a-space>
            </span>

            <template slot="footer">
              <a-pagination
                  style="text-align: end"
                  v-model="feedbackPage.pageNum"
                  :page-size-options="['2', '4', '5']"
                  :total="feedbackPage.total"
                  show-size-changer
                  :page-size="feedbackPage.pageSize"
                  @showSizeChange="onPageSizeChangeHandler"
                  @change="onPageNumChangeHandler"
              >
                <template slot="buildOptionText" slot-scope="props">
                  <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                  <span v-if="props.value === '50'">全部</span>
                </template>
              </a-pagination>
            </template>
          </a-table>
        </div>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import {handlerReport, reportList} from "@/api/resourse";
import {DEFAULT_PAGENUM, DEFAULT_PAGESIZE} from "@/constent";
import moment from "moment";
import {getFeedbackDetail, getFeedbackList, handlerFeedback} from "@/api/feedback";

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20, offset: 4 },
};
export default {
  name: "report",
  data() {
    return {
      reportSearchForm: this.$form.createForm(this, {name: 'reportSearchForm'}),
      columns:[
        {
          title: '编号',
          scopedSlots: { customRender: 'serial' },
          width: 80,
          key: 'index',
          align:'center',
        },
        {
          title: '举报类型',
          dataIndex: 'reportType',
          key: 'reportType',
          width: 100,
          align: 'center'
        },
        {
          title: '举报人用户名',
          dataIndex: 'userVo.userName',
          key: 'reportUserId',
          width: 120,
          align: 'center'
        },
        {
          title: '被举报资源id',
          dataIndex: 'resId',
          key: 'resId',
          width: 120,
          align: 'center'
        },
        {
          title: '状态',
          key: 'reportStatus',
          dataIndex: 'reportStatus',
          width: 100,
          align: 'center',
          customRender: (text) => text === 0 ? <a-tag color="orange">待处理</a-tag> : text === 1 ?
              <a-tag color="green">已处理</a-tag> : <a-tag color="red">已驳回</a-tag>
        },
        {
          title: '举报原因',
          key: 'reportWhy',
          dataIndex: 'reportWhy',
          align: 'center',
          ellipsis: true,
          width: 200
        },
        {
          title: '举报提交时间',
          key: 'reportPushTime',
          dataIndex: 'reportPushTime',
          width: 200,
          align: 'center',
          ellipsis: true,
          customRender: text => text === null ? '' : moment(text).format("yyyy-MM-DD HH:mm:ss")
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'action'},
        },
      ],
      formItemLayout,
      formTailLayout,
      visible:false,
      // 举报搜索参数
      params: {
        keyword: '',
        pageSize: DEFAULT_PAGESIZE,
        pageNum: DEFAULT_PAGENUM,
        reportStatus: 0
      },
      isloading: false,
      reportPage: {
        total:20,
        pageNum:DEFAULT_PAGENUM,
        pageSize:DEFAULT_PAGESIZE,
        data:[]
      },
      // 举报当前操作
      currentOpera:1,
      // 举报处理标号
      handlerCode:1,
      reportBeizhu:'',
      currentReport:{},
      // 反馈相关
      feedbackPage:{},
      feedbackSearchForm: this.$form.createForm(this, {name: 'feedbackSearchForm'}),
      // 举报搜索参数
      feedbackParams: {
        keyword: '',
        pageSize: DEFAULT_PAGESIZE,
        pageNum: DEFAULT_PAGENUM,
        feedbackType:'',
        feedbackStatus: undefined
      },
      feedbackColumns:[
        {
          title: '编号',
          scopedSlots: { customRender: 'serial' },
          width: 80,
          key: 'index',
          align:'center',
        },
        {
          title: '反馈类型',
          dataIndex: 'feedbackType',
          key: 'feedbackType',
          width: 100,
          align: 'center'
        },
        {
          title: '反馈人用户名',
          dataIndex: 'feedbackUser.userName',
          key: 'feedbackUserId',
          width: 120,
          align: 'center'
        },
        {
          title: '处理状态',
          key: 'feedbackStatus',
          dataIndex: 'feedbackStatus',
          width: 100,
          align: 'center',
          customRender: (text) => text === 0 ? <a-tag color="orange">待处理</a-tag> : <a-tag color="green">已处理</a-tag>
        },
        {
          title: '反馈内容',
          key: 'feedbackContent',
          dataIndex: 'feedbackContent',
          align: 'center',
          ellipsis: true,
          width: 250
        },
        {
          title: '反馈日期',
          key: 'feedbackDate',
          dataIndex: 'feedbackDate',
          width: 200,
          align: 'center',
          ellipsis: true,
          customRender: text => text === null ? '' : moment(text).format("yyyy-MM-DD HH:mm:ss")
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'action'},
        },
      ],
      feedbackDetailVisible: false,
      feedbackHandlerVisible: false,
      currentFeedback:{},
      feedbackDetail:{},
      feedbackHandlerParam:{
        feedBackHandlerCode:undefined,
        feedBackHandlerResult:''
      },
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px',
      },
      pStyle2: {
        marginBottom: '24px',
      },
    }
  },
  watch: {
    params: {
      immediate: true,
      deep: true,
      handler: function (newValue) {
        this.loadReportList(this.params);
      }
    },
    feedbackParams:{
      immediate:true,
      deep:true,
      handler:function (newValue){
        this.loadFeedbackList(this.feedbackParams);
      }
    }
  },

  methods: {
    // 加载举报列表
    async loadReportList(params) {
      this.isloading = true;
      const {code, data, msg} = await reportList(params);
      if (code === 200) {
        this.isloading = false;
        this.reportPage = data;
      } else {
        this.isloading = false;
        this.$message.error(msg);
      }
    },
    // 搜索举报回调
    handleSearch(e) {
      e.preventDefault();
      this.loadReportList(this.params);
    },

    // 重置举报搜索条件
    handleReset() {
      // 重置搜索条件
      this.params = this.initQueryParam;
      // 重新家在数据
      this.loadReportList();
    },

    /**
     * 每页显示条数改变回调
     * @param current
     * @param pageSize
     */
    onPageSizeSizeChangeHandler(current, pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNum = DEFAULT_PAGENUM;
    },

    /**
     * 当前页改变回调
     * @param current
     * @param pageSize
     */
    onPageChangeHandler(current) {
      this.params.pageNum = current;
    },

    // handler处理器
    reportHandler(type, record){
      this.currentReport = record;
      if ('handler' === type){
        this.visible = true;
      }else if ('detail' === type){
        // 跳转详情页
        this.$router.push({
          name:'reportDetail',
          params:{
            id: this.$encry(record.id)
          }
        })
      }
    },
    // 模态框确认回调
    async submitHandler() {
      const id = this.currentReport.id;
      const handlerCode = this.handlerCode;
      const reportBeizhu = this.reportBeizhu;
      if (!handlerCode){
        this.$message.error("处理编号为必选项");
        return;
      }
      if (!reportBeizhu || reportBeizhu.length === 0){
        this.$message.error("处理描述为必填项");
        return;
      }
      let handlerParams = {
        id,
        handlerCode,
        reportBeizhu
      }
      let result = await handlerReport(handlerParams);
      if (result.code === 200){
        this.visible = false;
        this.handlerCode = 1;
        this.reportBeizhu = '';
        this.$message.success(result.msg);
        this.loadReportList(this.params);
      }else{
        this.$message.error(result.msg);
      }
    },
    /**
     * 反馈相关
     */
    // 加载反馈列表
    async loadFeedbackList(params) {
      this.isloading = true;
      const {code, data, msg} = await getFeedbackList(params);
      if (code === 200) {
        this.isloading = false;
        this.feedbackPage = data;
      } else {
        this.isloading = false;
        this.$message.error(msg);
      }
    },

    // handler处理器
    async feedBackHandler(type, record){
      this.currentFeedback = record;
      if ('handler' === type){
        this.feedbackHandlerVisible = true;
      }else if ('detail' === type){
        // 发请求获取详情数据
        let result = await getFeedbackDetail(record.id);
        if (result.code === 200){
          this.feedbackDetail = result.data;
          // 跳转详情页
          this.feedbackDetailVisible = true;
        }else{
          this.$message.error(result.msg);
        }
      }
    },

    // 反馈搜索提交回调
    feedbackHandleSearch(e) {
      e.preventDefault();
      this.loadFeedbackList(this.feedbackParams);
    },

    // 重置举报搜索条件
    feedbackHandleReset() {
      // 重置搜索条件
      this.feedbackParams = this.initQueryParam;
      // 重新家在数据
      this.loadFeedbackList(this.feedbackParams);
    },

    async feedBacksubmitHandler(){
      const id = this.currentFeedback.id;
      const { feedBackHandlerCode, feedBackHandlerResult } = this.feedbackHandlerParam;
      if (!feedBackHandlerCode){
        this.$message.error("反馈方式为必选项");
        return;
      }
      if (!feedBackHandlerResult || feedBackHandlerResult.length === 0){
        this.$message.error("反馈回复为必填项");
        return;
      }
      let handlerParams = {
        id,
        feedBackHandlerCode,
        feedBackHandlerResult
      }
      let result = await handlerFeedback(handlerParams);
      if (result.code === 200){
        this.feedbackHandlerVisible = false;
        this.feedbackHandlerParam = {};
        this.$message.success(result.msg);
        this.loadFeedbackList(this.feedbackParams);
      }else{
        this.$message.error(result.msg);
      }
    },

    /**
     * 每页显示条数改变回调
     * @param current
     * @param pageSize
     */
    onPageSizeChangeHandler(current, pageSize) {
      this.feedbackParams.pageSize = pageSize;
      this.feedbackParams.pageNum = DEFAULT_PAGENUM;
    },

    /**
     * 当前页改变回调
     * @param current
     * @param pageSize
     */
    onPageNumChangeHandler(current) {
      this.feedbackParams.pageNum = current;
    },

    // 抽屉
    showDrawer() {
      this.feedbackDetailVisible = true;
    },
    onClose() {
      this.feedbackDetailVisible = false;
    },

  }
}
</script>

<style scoped>

</style>
